<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>胖头鱼的个人博客|博客首页</title>

    <link rel="stylesheet" th:href="@{/my/css/reset.css}" >
    <link rel="stylesheet" th:href="@{/my/css/fragment.css}">
    <link rel="stylesheet" th:href="@{/my/css/home.css}">
    <link rel="stylesheet" th:href="@{/fontawesome-free-5/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/element-ui/css/element-ui.css}">

</head>
<body>

<div id="app">

    <link rel="stylesheet" v-if="theme === 'dark' " th:href="@{/my/css/theme/dark.css}">
    <link rel="stylesheet" v-if="theme == 'light' " th:href="@{/my/css/theme/light.css}">

    <nav class="nav_bg">
        <div class="left">
            <a th:href="@{/}">首页</a>
            <a href="javascript:;" @click="news">新闻</a>
            <a th:href="@{/time}">时间线</a>
            <a th:href="@{/about}">关于我</a>
        </div>
        <div class="right">
            <img v-show="theme === 'light' " @click="setTheme('dark')"  th:src="@{/my/img/nav/light.svg}" alt="" src="">
            <img v-show="theme === 'dark' "  @click="setTheme('light')" th:src="@{/my/img/nav/dark.svg}" alt="" src="">
            <a v-show="token === 'No'"  @click="dialogLogin = true">登录</a>
            <div v-show="token === 'Yes'">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    胖头鱼<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="inAdmin" >进入首页</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </nav>

    <header>
        <!-- 动态轮播图 -->
        <div v-for="url in urls" class="dynanic_shuffl" >
            <img  :src="url.url" alt="">
        </div>
        <div class="title">
            <h1>关于胖头鱼</h1>
            <p>欢迎来到胖头鱼的小破站</p>
        </div>
    </header>

    <main>
        <div class="main">
            <div>
                <div class="left">
                    <div class="all_article card">
                        <div class="title">
                            <h2>博客文章</h2>
                        </div>
                        <div class="body">
                            <ul>
                                <li v-for="item in listData">
                                    <div class="left">
                                        <div>
                                            <img :src="item.url" alt="">
                                        </div>
                                    </div>
                                    <div class="right">
                                        <h2><a href="javascript:;" @click="articleById(item.id)">{{ item.title }}</a></h2>
                                        <p>{{ item.abstracter }}</p>
                                        <div class="article_info">
                                            <span>
                                                <i class="far fa-clock"></i> <span>{{ item.createDate }}</span>
                                            </span>
                                                <span>
                                                <i class="fas fa-thumbs-up"></i> <span>{{ item.viewNum }}</span>
                                            </span>
                                                <span>
                                                <i class="far fa-eye"></i> <span>{{ item.diggNum }}</span>
                                            </span>
                                        </div>
                                        <a src="javascript:;" @click="articleById(item.id)">查看详情</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="about">
                        <div>
                            <img src="http://182.92.168.4:8080/img/static/head.jpg" alt="">
                        </div>
                        <h2>PangTouYu</h2>
                        <p>留下了没有技术的眼泪</p>
                        <button @click="about">关于我</button>
                    </div>
                    <div class="tags card">
                        <div class="title">
                            <h2>标签云</h2>
                        </div>
                        <div class="body init">
                            <ul>
                                <li v-for="item in tags">{{ item.tag }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="left">
            <p class="thank">Thank For</p>
            <p class="site_info">
                <span><img th:src="@{/my/img/footer/tencent.png}" src="" alt="">腾讯云服务器</span>
                <span><img th:src="@{/my/img/footer/tencent.png}" src="" alt="">腾讯云SSL证书</span>
                <span><img th:src="@{/my/img/footer/qiniu.png}" src="" alt="">七牛云存储</span>
            </p>
            <p class="version">
                <span>version</span>
                <span>4.0.0</span>
            </p>
            <p>建站日期: 2021-12-29</p>
            <p class="badges">
                <a th:href="@{https://beian.miit.gov.cn}" style="color: var(--footer_color)"><img th:src="@{/my/img/footer/badges.png}" alt="" src="">备案号</a>
            </p>
        </div>
        <div class="right">
            <div class="contact">
                <div>
                    <img class="svg" th:src="@{/my/img/footer/qq_icon.svg}" src="" alt="">
                    <img class="qq" th:src="@{/my/img/footer/qq.png}" src="" alt="">
                </div>
                <div>
                    <img class="svg" th:src="@{/my/img/footer/wexin_icon.svg}" src="" alt="">
                    <img class="qq" th:src="@{/my/img/footer/wechat.png}" src="" alt="">
                </div>

                <div>
                    <a><img class="svg" th:src="@{/my/img/footer/bilibili_icon.svg}" src="" alt=""></a>
                </div>
                <div>
                    <a><img class="svg" th:src="@{/my/img/footer/gitee_icon.svg}" src="" alt=""></a>
                </div>
                <div>
                    <a><img class="svg" th:src="@{/my/img/footer/github_icon.svg}" src="" alt=""></a>
                </div>

            </div>
            <p>
                联系邮箱: 1554696146@qq.com
            </p>
        </div>
    </footer>

    <div class="dialog_box">
        <el-dialog title="管理员登录" :visible.sync="dialogLogin">
            <div class="top">
                <p>Username : </p>
                <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
                <p>Password : </p>
                <el-input placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
            </div>

            <div class="bottom">
                <el-button type="success" @click="login">登录</el-button>
            </div>

        </el-dialog>
    </div>
</div>

<script th:src="@{/vue/vue.js}"></script>
<script th:src="@{/axios/axios.min.js}"></script>
<script th:src="@{/element-ui/js/element-ui.js}"></script>
<script th:src="@{/jquery/jquery.min.js}"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            theme: 'light',
            dialogLogin: false,
            token: 'No',
            urls: [
                'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
                'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
                'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
            ],
            loginForm: {
                username: '',
                password: ''
            },
            listData: [
                {
                    id: 1,  // 文章 id
                    title: 'React基本使用',  // 标题
                    abstracter: '安装react包\n' +
                        'Python npm i react react-dom\n' +
                        '使用 react\n' +
                        '```html\n' +
                        'react基本使用\n' +
                        '// 2.创建react元素 // 参数一: 元素名称',  // 简介
                    url: 'http://182.92.168.4:8080/img/static/mm-11.jpg',  // 图片
                    createDate: '2022-03-06',  // 创建日期
                    viewNum: 0,  // 点赞
                    diggNum: 0,  // 浏览
                }
            ],
            tags: [
                {
                    tag: 'JAVA',
                },
                {
                    tag: 'HTML'
                }
            ],
        },
        methods: {
            // 获取主题
            setTheme(themeName) {
                this.theme = themeName;
                localStorage.setItem('theme', themeName);
            },
            // 初始化主题
            init_theme() {
                let theme = localStorage.getItem('theme');
                if ( theme) {
                    this.theme = theme;
                }
            },
            // 初始化 token
            init_Token() {
                let token = localStorage.getItem('token');
                if ( token ) {
                    this.token = token;
                }
            },
            // 登录
            login() {
                axios.post("/login", this.loginForm).then(res => {
                    console.log(res.data);
                    if ( res.data.code === 200) {
                        this.$message.success(res.data.msg);
                        localStorage.setItem("token", "Yes");
                        setTimeout(() => {
                            this.dialogLogin = false;
                        }, 500);
                    } else {
                        this.$message.warning(res.data.msg);
                    }
                })
            },
            // 进入首页
            inAdmin() {
                setTimeout(() => {
                    location.href = "/admin/";
                }, 200)
            },
            // 获取文章列表
            articleList() {
                // console.log('获取文章列表')
                axios.get('/articleList').then(res => {
                    this.listData = res.data;
                })
            },
            // 查看博文
            articleById(id) {
                setTimeout(() => {
                    location.href = '/article/' + id;
                }, 100)
            },
            // 初始化标签
            init_tags() {
                axios.get('/getAllTags').then(res => {
                    this.tags = res.data;
                })
            },
            news() {
                console.log('success');
                this.$message.warning('该功能还未上线');
            },
            about() {
                setTimeout(() => {
                    location.href = '/about';
                }, 500)
            },
            init_imgs() {
                axios.get('/singleImgs').then(res => {
                    this.urls = res.data;
                    // console.log(res.data);
                })
            }
        },
        created() {
            this.init_theme();
            this.init_Token();
            this.articleList();
            this.init_tags();
            this.init_imgs();
        }
    })
</script>

<script>
    // 获取取药轮播的 div
    let menu_img = document.querySelectorAll('.dynanic_shuffl')
    // 获取长度
    let menu_length = menu_img.length
    // 初始位置
    let index = 0
    setInterval(() => {
        if ( index === menu_length) {
            index = 0
        }
        for ( let i of menu_img) {
            i.style.opacity = 0;  // 设置透明渡为 0
        }
        menu_img[index++].style.opacity = 1
    }, 5000);
</script>

<script>
    // 监听滚动事件
    let nav = document.querySelector('.nav_bg');
    window.onscroll = function () {
        let top = document.documentElement.scrollTop;
        if ( top >= 200) {
            nav.classList.add('show');
        } else {
            nav.classList.remove('show');
        }
    }
</script>

</body>
</html>